<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>超图车辆移动</title>
		<link href="../../css/global.css" rel="stylesheet" />
		<link href="../../css/animate.min.css" rel="stylesheet" />
		<style type="text/css">
			html,body {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				border: 0;
				box-sizing: border-box;
			}
			#map {
				width: 100%;
				height: 100%;
			}

			#car {
				width: 20px;
				height: 20px;
				background: url("../../img/货车.png");
				background-size: cover;
				position: absolute;
				z-index: 3000;
			}

			#pop {
				position: absolute;
				z-index: 3001;
			}

#round {
	position: absolute;
	height: 80px;
	width: 80px;
	border-radius: 50%;
	z-index: 2999;
	background-color: orange;
	opacity: 0.8;
}
			#pop-top {
				width: 100px;
				height: 80px;
				background: url("../../img/box.png");
				background-position: center center;
				background-size: cover;
			}

			#pop-foot {
				width: 20px;
				height: 20px;
				background: url("../../img/point-mark.png");
				background-size: cover;
				margin-top: 16px;
				margin-left: 40px;
			}
		</style>
		<script type="text/javascript" src="../../js/common/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="../../supermap/libs/SuperMap.Include.js"></script>
		<script type="text/javascript">
			var map;
			var url2 = "http://support.supermap.com.cn:8090/iserver/services/data-DynamicData/rest/data";
			$(function() {
				var url = "http://support.supermap.com.cn:8090" + "/iserver/services/map-world/rest/maps/World";

				function init() {
					map = new SuperMap.Map("map", {
						controls: [
							new SuperMap.Control.Navigation(),
							new SuperMap.Control.Zoom(),
							new SuperMap.Control.MousePosition()
						],
						allOverlays: true
					});
					map.addControl(new SuperMap.Control.ScaleLine()); //地图比例尺控件
					map.addControl(new SuperMap.Control.LayerSwitcher()); //图层控制显示控件
					map.addControl(new SuperMap.Control.MousePosition()); //经纬度实时显示控件
					var layerBase = new SuperMap.Layer.Tianditu();
					layer = new SuperMap.Layer.Tianditu();
					layer.isLabel = true;
					layer.layerType = "cva";
					var markers = new SuperMap.Layer.Markers("Markers");
					vector = new SuperMap.Layer.Vector("vector");
					map.addLayers([layerBase, markers, layer, vector]);
					map.setCenter(new SuperMap.LonLat(120.31267, 32.86722), 13);

					// 					var linePoint = [
					// 						new SuperMap.Geometry.Point(120.30179, 32.87497),
					// 						new SuperMap.Geometry.Point(120.30389, 32.86613),
					// 						new SuperMap.Geometry.Point(120.32042, 32.86896),
					// 						new SuperMap.Geometry.Point(120.32600, 32.86063)
					// 					];
					// 					var lineString = new SuperMap.Geometry.LineString(linePoint);
					// 					var lineVector = new SuperMap.Feature.Vector(lineString);
					// 					lineVector.style = {
					// 						strokeColor: 'red',
					// 						strokeWidth: 8
					// 					};
					//	vector.addFeatures([lineVector]);
				}
				init();
				var line_wei_1 = [
					[120.30179, 32.87497],
					[120.30389, 32.86613],
					[120.32042, 32.86896],
					[120.32600, 32.86063]
				];
				var line_wei_2 = [
					[120.27551, 32.88773],
					[120.27585, 32.87306],
					[120.27748, 32.86404],
					[120.28658, 32.86362]
				];
				var line_wei_3 = [
					[120.26100, 32.85538],
					[120.27765, 32.85546],
					[120.28967, 32.85546],
					[120.29619, 32.85975]
				];
				addText1();
				addText2();
				addText3();
				for (let i = 0; i < line_wei_1.length; i++) {
					let zhq = map.getPixelFromLonLat(new SuperMap.LonLat(line_wei_1[i + 1]));
					//	console.log(zhq);
					$("#car1 #car").animate({
						left: (zhq.x - 10) + 'px',
						top: (zhq.y - 10) + 'px',
					}, line_wei_1.length * 10000, 'linear', function() {

					})
					$("#car1 #round").animate({
						left: (zhq.x -41 ) + "px",
						top: (zhq.y -38) + "px",
					}, line_wei_1.length * 10000, 'linear', function() {


					})
					$("#car1 #pop").animate({
						left: (zhq.x - 48) + 'px',
						top: (zhq.y - 120) + 'px'
					}, line_wei_1.length * 10000, 'linear', function() {
						$("#car1 #pop-foot").css("background", "url('../../img/alarm.png')");
						$("#car1 #pop-top").text("小车1修改样式");

					})

				}
				for (let i = 0; i < line_wei_2.length; i++) {
					let zh = map.getPixelFromLonLat(new SuperMap.LonLat(line_wei_2[i + 1]));
					//console.log(zh);
					$("#car2 #car").animate({
						left: (zh.x - 10) + 'px',
						top: (zh.y - 10) + 'px',
					}, line_wei_2.length * 10000, 'linear', function() {

					})
					$("#car2 #round").animate({
											left: (zh.x -41 ) + "px",
											top: (zh.y -38) + "px",
										}, line_wei_2.length * 10000, 'linear', function() {
					
										})
					$("#car2 #pop").animate({
						left: (zh.x - 48) + 'px',
						top: (zh.y - 120) + 'px'
					}, line_wei_2.length * 10000, 'linear', function() {
						$("#car2 #pop-foot").css("background", "url('../../img/alarm.png')");
						$("#car2 #pop-top").text("小车2修改样式");

					})

				}
				for (let i = 0; i < line_wei_3.length; i++) {
					let zhw = map.getPixelFromLonLat(new SuperMap.LonLat(line_wei_3[i + 1]));
					//	console.log(zhw);
					$("#car3 #car").animate({
						left: (zhw.x - 10) + 'px',
						top: (zhw.y - 10) + 'px',
					}, line_wei_3.length * 10000, 'linear', function() {

					})
					$("#car3 #round").animate({
											left: (zhw.x -41 ) + "px",
											top: (zhw.y -38) + "px",
										}, line_wei_3.length * 10000, 'linear', function() {
					
										})
					$("#car3 #pop").animate({
						left: (zhw.x - 48) + 'px',
						top: (zhw.y - 120) + 'px'
					}, line_wei_3.length * 10000, 'linear', function() {
						$("#car3 #pop-foot").css("background", "url('../../img/alarm.png')");
						$("#car3 #pop-top").text("小车3修改样式");

					})

				}


				function addText1() {
					var textHTML = "<div id='car1'>";
					textHTML += '<div id="car"></div>';
					textHTML += '<div id="round"></div>';
					textHTML += '<div id="pop"><div id="pop-top">开始，你为什么跑的那么快</div><div id="pop-foot"></div></div>';
					textHTML += "</div>";
					$("#map").before(textHTML);
					var point = map.getPixelFromLonLat(new SuperMap.LonLat(line_wei_1[0]));
					var car_left = (point.x - 10) + "px";
					var car_top = (point.y - 10) + "px";
					var pop_left = (point.x - 48) + "px";
					var pop_top = (point.y - 120) + "px";
					var round_left = (point.x -41 ) + "px";
					var round_top = (point.y -38) + "px";
					$("#car1 #car").css({
						left: car_left,
						top: car_top,
					});
					$("#car1 #pop").css({
						left: pop_left,
						top: pop_top,
					})
					$("#car1 #round").css({
						left: round_left,
						top: round_top,
					})
				//	$("#car1 #round").addClass("animated flash infinite");
				$("#car1 #round").addClass("animated bounce zoomIn infinite");
				}

				function addText2() {
					var textHTML = "<div id='car2'>";
					textHTML += '<div id="car"></div>';
					textHTML += '<div id="round"></div>';
					textHTML += '<div id="pop"><div id="pop-top">开始，我要超速</div><div id="pop-foot"></div></div>';
					textHTML += "</div>";
					$("#map").before(textHTML);
					var point = map.getPixelFromLonLat(new SuperMap.LonLat(line_wei_2[0]));
					var car_left = (point.x - 10) + "px";
					var car_top = (point.y - 10) + "px";
					var pop_left = (point.x - 48) + "px";
					var pop_top = (point.y - 120) + "px";
					var round_left = (point.x -41 ) + "px";
					var round_top = (point.y -38) + "px";
					$("#car2 #car").css({
						left: car_left,
						top: car_top,
					});
					$("#car2 #pop").css({
						left: pop_left,
						top: pop_top,
					})
						$("#car2 #round").css({
							left: round_left,
							top: round_top,
						})
					//	$("#car1 #round").addClass("animated flash infinite");
					$("#car2 #round").addClass("animated bounce zoomIn infinite");
				}

				function addText3() {
					var textHTML = "<div id='car3'>";
					textHTML += '<div id="car"></div>';
					textHTML += '<div id="round"></div>';
					textHTML += '<div id="pop"><div id="pop-top">开始，超速是不对的</div><div id="pop-foot"></div></div>';
					textHTML += "</div>";
					$("#map").before(textHTML);
					var point = map.getPixelFromLonLat(new SuperMap.LonLat(line_wei_3[0]));
					var car_left = (point.x - 10) + "px";
					var car_top = (point.y - 10) + "px";
					var pop_left = (point.x - 48) + "px";
					var pop_top = (point.y - 120) + "px";
					var round_left = (point.x -41 ) + "px";
					var round_top = (point.y -38) + "px";
					$("#car3 #car").css({
						left: car_left,
						top: car_top,
					});
					$("#car3 #pop").css({
						left: pop_left,
						top: pop_top,
					})
						$("#car3 #round").css({
							left: round_left,
							top: round_top,
						})
					//	$("#car1 #round").addClass("animated flash infinite");
					$("#car3 #round").addClass("animated bounce zoomIn infinite");
				}


			})
		</script>
	</head>
	<body>
		<div id="map"></div>
	</body>
</html>
